import React, { Component } from 'react'
import { Alert, StatusBar, AsyncStorage, TouchableOpacity,ActivityIndicator,ScrollView, View, Image, Text } from 'react-native'
import Icon from 'react-native-vector-icons/FontAwesome'
import Swiper from 'react-native-swiper'

import ShortcutGrid from '../Components/ShortcutGrid'
import Banner from '../Components/Banner'
import TodayRecommend from '../Components/TodayRecommend'
import { Loading } from '../Components'

import AppConfig from '../Config/AppConfig'
const domain = AppConfig.domain

import { connect } from 'react-redux'

// import CityActions from '../Redux/CityRedux'
import CommodityCategoryActions from '../Redux/CommodityCategoryRedux'
import AdActions from '../Redux/AdRedux'
import HomeSmallBannerActions from '../Redux/HomeSmallBannerRedux'
import PageActions from '../Redux/PageRedux'
import TodayRecommendActions from '../Redux/TodayRecommendRedux'

import Map from '../Lib/Map'

// Styles
import { Colors } from '../Themes'
import styles from './Styles/HomeScreenStyle'

class HomeScreen extends Component {
  constructor(props) {
    super(props)
    this.state = {
      adcode: null
    }
  }
  static navigationOptions = {
    header: null,
    tabBarLabel: '首页',
    tabBarIcon: ({tintColor}) =>
      <Icon name='home' color={tintColor} size={24} />,
  }
  componentDidMount() {
    this._navListener = this.props.navigation.addListener('didFocus', ()=>{
      StatusBar.setTranslucent(true)
      StatusBar.setBarStyle('light-content')
      StatusBar.setBackgroundColor('transparent')
    })
    const adcode = this.state.adcode // do not use
    this.props.adRequest('home_top', adcode)
    this.props.getCategory()
    this.props.getTodayRecommend(adcode)
    this.props.getSmallBanner('home_bottom', adcode)
    this.props.getPage(this.props.city, adcode)
  }
  componentWillUnmount() {
    this._navListener.remove()
  }

  // 定位标签
  _renderPosition() {
    let name = '定位中...'
    if (this.props.city) {
      if (this.props.city.aoi) {
        name = this.props.city.aoi
      } else {
        name = this.props.city.city
      }
    }
    return (
      <View style={styles.cityContainer}>
        <Icon style={styles.cityIcon}
          name='map-marker' size={16} />
        <Text style={styles.cityTitle}>{name}</Text>
      </View>
    )
  }

  // 会员专享和充值入口
  _renderMemberIn() {
    const { navigate } = this.props.navigation
    return (
      <View style={{flexDirection:'row',marginVertical:5}}>
        <TouchableOpacity
          style={{width:'50%'}}
          onPress={()=>navigate('VipScreen')}>
          <Image
            style={{width:'100%',height:100}}
            source={require('../Images/zhuanxiang.jpg')} />
        </TouchableOpacity>
        <TouchableOpacity
          style={{width:'50%'}}
          onPress={()=>navigate('RechargeScreen')}>
          <Image
            style={{width:'100%',height:100}}
            source={require('../Images/chongzhi.jpg')} />
        </TouchableOpacity>
      </View>
    )
  }

  render () {
    if(this.props.ad.fetching || this.props.category.fetching) {
      return <Loading />
    }
    const { navigate } = this.props.navigation
    return (
      <ScrollView style={styles.container}>
        {this._renderPosition()}
        {this.props.ad.payload !== null &&
        <Banner
          height={180}
          data={this.props.ad.payload}
          navigation={this.props.navigation} />}
        <ShortcutGrid
          data={this.props.category.payload}
          navigation={this.props.navigation} />
        {this._renderMemberIn()}
        {this.props.smallBanner.payload !== null &&
        <Banner
          height={140}
          data={this.props.smallBanner.payload}
          navigation={this.props.navigation} />}
        <Text style={styles.subTitle}>今日推荐</Text>
        {this.props.recommend.fetching ? (
          <ActivityIndicator style={{marginTop:20}} />
        ) : (
          <TodayRecommend
            data={this.props.recommend.payload}
            navigation={this.props.navigation} />
        )}

        <Text style={styles.subTitle}>健康知识</Text>
        {this.props.page.payload && this.props.page.payload.map((item,i) =>
          <TouchableOpacity
            key={i}
            activeOpacity={0.7}
            onPress={()=>navigate('WebScreen', {
              title:item.title,link:item.url
            })}>
            <Image 
              source={{uri:item.photo}} 
              style={{width:'100%',height:140}} />
          </TouchableOpacity>
        )}
      </ScrollView>
    )
  }
}

const mapStateToProps = (state) => {
  return {
    city: state.city.payload,
    category: state.commodityCategory,
    ad: state.ad,
    smallBanner: state.homeSmallBanner,
    page: state.page,
    recommend: state.todayRecommend,
  }
}

const mapDispatchToProps = (dispatch) => {
  return {
    getCategory: () => dispatch(
      CommodityCategoryActions.commodityCategoryRequest()),
    adRequest: (code, adcode) => dispatch(AdActions.adRequest(code, adcode)),
    getSmallBanner: (code, adcode) => dispatch(HomeSmallBannerActions.homeSmallBannerRequest(code, adcode)),
    getPage: (adcode) => dispatch(PageActions.pageRequest(adcode)),
    getTodayRecommend: (adcode) => dispatch(TodayRecommendActions.todayRecommendRequest(adcode))
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(HomeScreen)
